<template>
  <div class="bonus-details page" ref="webview">
    <van-nav-bar title="财务明细" class="bg_white" left-arrow @click-left="$router.go(-1)" />
    <van-dropdown-menu class="dropdown-menu" :close-on-click-outside="closeOutside">
      <van-dropdown-item v-model="type" :title="typeTitle" :options="bonusTypeoOption" @change="changeDropdown" />
      <van-dropdown-item :title="timeTitle" ref="item">
        <van-cell title="全部时间" :class="{'dropdown-menu-call-active':time===1}" @click.native="typeALLTimeClick">
          <div class="van-icon van-icon-success van-dropdown-item__icon" slot="right-icon"></div>
        </van-cell>
        <div class="typeTime" @click="typeTimeClick">{{typeTime}}</div>
        <van-button block type="info" @click="onConfirmSubmit">确认</van-button>
      </van-dropdown-item>
    </van-dropdown-menu>
    <div class="line"></div>
    <div class="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="nodata" v-if="dataList.length===0" style="height:200px;">暂无数据</div>
        <van-list v-model="loading" :finished="finished" :finished-text="dataList.length>5?'没有更多了':''" @load="onLoad" :offset="50" :immediate-check="false" v-else>
          <template v-for="(item,index) in dataList">
            <div class="list" :key="index">
              <div class="info">
                <div class="name">{{item.remark}}</div>
                <div class="time">{{item.create_time}}</div>
              </div>
              <div class="amount-balance">
                <div class="amount">{{item.amount > 0?'+'+item.amount:item.amount}}</div>
                <div class="balance">深秘豆：{{item.balance}}</div>
              </div>
            </div>
          </template>
        </van-list>
      </van-pull-refresh>
    </div>
    <van-calendar :round="false" ref="calendar" :min-date="minDate" :max-date="maxDate" @closed="closeOutside=true" color="#007aff" v-model="showCalendar" type="range" @confirm="onConfirm" />
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import mixins from '@/utils/mixins';
import tools from '@/utils/tools';
export default {
  name: 'bonusDetails',
  data () {
    var queryType = parseInt(tools.getQueryVariable('type'));
    return {
      isSelect: false,
      showCalendar: false,
      showPreview: false,
      minDate: new Date(2019, 0, 1),
      maxDate: new Date(2050, 0, 1),
      page: 1,
      closeOutside: true,
      dataList: [],
      typeTime: '开始时间 - 结束时间',
      startTime: '',
      endTime: '',
      type: queryType || 0,
      time: 1,
      typeTitle: queryType === 1 ? '深秘豆' : queryType === 2 ? '注册积分' : queryType === 3 ? '配送积分' : '类型',
      timeTitle: '全部时间',
      isLoading: false,
      bonusTypeoOption: [
        // { text: '全部类型', value: 0 },
        { text: '深秘豆', value: 1 }
        // ,
        // { text: '注册积分', value: 2 },
        // { text: '配送积分', value: 3 }
      ],
      apiType: 'user',
      apiUrl: ''
    };
  },
  mixins: [mixins],
  computed: {
    ...mapGetters(['userInfo']),
    queryType () {
      return this.$route.query.type;
    },
    isApp: {
      get () {
        return !!localStorage.getItem('isApp') || !!this.$route.query.isApp;
      }
    }
  },
  created () {
    this.apiUrl = 'financeWater';
    if (this.queryType) {
      this.params.type = this.queryType;
    }
    this.getList(this.apiUrl, true);
  },
  methods: {
    formatDate (date) {
      var getMonth = date.getMonth() + 1;
      return `${date.getFullYear()}-${getMonth < 10 ? '0' + getMonth : getMonth}-${date.getDate()}`;
    },
    typeALLTimeClick () {
      this.timeTitle = '全部时间';
      this.typeTime = '开始时间 - 结束时间';
      this.startTime = '';
      this.endTime = '';
      this.time = 1;
      this.$refs.calendar.reset();
    },
    typeTimeClick () {
      this.timeTitle = '区间时间';
      this.startTime = '';
      this.endTime = '';
      this.time = 2;
      this.closeOutside = false;
      this.showCalendar = true;
    },
    onConfirm (date) {
      const [start, end] = date;
      this.showCalendar = false;
      this.startTime = this.formatDate(start);
      this.endTime = this.formatDate(end);
      this.typeTime = `${this.formatDate(start)} - ${this.formatDate(end)}`;
    },
    closeDropdown () {
      this.getList(this.apiUrl, true);
    },
    // 点击筛选
    changeDropdown (type) {
      // this.params.startDate = '';
      // this.params.endDate = '';
      this.params.type = this.type;
      this.typeTitle = this.bonusTypeoOption[type].text;
      this.getList(this.apiUrl, true);
    },
    onConfirmSubmit () {
      this.params.startDate = this.startTime;
      this.params.endDate = this.endTime;
      this.$refs.item.toggle();
      this.getList(this.apiUrl, true);
    },
    showPayInfo (record) {
      this.isShow = true;
      this.showRecord = record;
    },
    goDetails () {
      this.$router.push({ 'path': '/address/edit', query: { id: 1 } });
    }
  }
};
</script>
<style lang="less" scoped>
.bonus-details {
  height: 100%;
  display: flex;
  flex-direction: column;
  .dropdown-menu {
    .van-dropdown-item__icon.active {
      color: #1989fa;
    }
  }
  .line {
    border-bottom: 2px solid #fafafa;
  }
  .typeTime {
    margin: 30px;
    padding: 26px 20px;
    display: block;
    background-color: #f6f6f6;
    border-radius: 10px;
    font-size: 28px;
    color: #666;
    text-align: center;
  }
  .earnings {
    padding: 10px 20px 20px;
    .rows-flex {
      display: flex;
      flex-wrap: wrap;
      .rows {
        width: 50%;
        .wp {
          padding: 20px 30px;
          box-sizing: border-box;
          background-color: #fff;
          box-shadow: 0px 4px 8px rgba(88, 89, 90, 0.14);
          border-radius: 8px;
          // box-shadow: -1px 2px 15px #d4d4d5;
          margin: 10px;
          .name {
            font-size: 30px;
            color: #312e2e;
          }
          .icon {
            width: 32px;
            height: 32px;
            margin-right: 3px;
            vertical-align: middle;
            position: relative;
            top: -4px;
          }
          .size-text {
            font-size: 24px;
            color: #999999;
            display: flex;
            align-items: center;
            padding-top: 4px;
          }
          .amount {
            font-size: 44px;
            color: #312e2e;
            line-height: 32px;
            position: relative;
            padding: 20px 0;
            font-family: 'Nirmala';
            font-weight: bold;
          }
          .text {
            color: #545454;
          }
          .c1 {
            color: #7c67ff;
          }
        }
      }
    }
  }
  .content {
    flex: 1;
    box-sizing: border-box;
    overflow: auto;
    .list {
      padding: 30px 40px;
      background-color: #fff;
      border-bottom: 1px solid rgba(238, 238, 238, 0.8);
      .amount-balance {
        display: flex;
        justify-content: space-between;
        .amount {
          font-size: 34px;
          color: #ff0000;
          line-height: 32px;
          position: relative;
          padding: 20px 0;
        }
        .balance {
          font-size: 24px;
          margin-top: 15px;
          color: #666;
        }
      }
      .info {
        display: flex;
        justify-content: space-between;
        .name {
          color: #000;
          font-size: 30px;
        }
        .text {
          font-size: 24px;
          padding-top: 10px;
          display: block;
          color: #959595;
        }
      }
      .right {
        text-align: right;
      }
      .time {
        text-align: right;
        font-size: 24px;
        color: #959595;
      }
      .state {
        background-color: #125dff;
        display: inline-block;
        padding: 8px 13px;
        color: #fff;
        width: 148px;
        font-size: 24px;
        text-align: center;
        border-radius: 5px;
        margin-top: 43px;
      }
    }
  }
}
</style>
